<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader title="工作台" hidden-breadcrumb>
        <template #content>
          <Avatar class="dashboard-workplace-header-avatar" :src="info.headimgUrl" />
          <div class="dashboard-workplace-header-tip">
            <p class="dashboard-workplace-header-tip-title">您好，{{ info.name }}，努力做好今天的工作吧！</p>
            <p class="dashboard-workplace-header-tip-desc">
              <span>今日天气{{ weatherInfo[0].dayweather }}，温度{{ weatherInfo[0].nighttemp }}℃ -
                {{ weatherInfo[0].daytemp }}℃，{{ weatherInfo[0].daywind }}风（{{ weatherInfo[0].daypower }}级）。</span>
              <span>明日天气{{ weatherInfo[1].dayweather }}，温度{{ weatherInfo[1].nighttemp }}℃ -
                {{ weatherInfo[1].daytemp }}℃，{{ weatherInfo[1].daywind }}风（{{ weatherInfo[1].daypower }}级）。</span>
            </p>
          </div>
        </template>
      </PageHeader>
    </div>
    <Row :gutter="24" class="ivu-mt">
      <Col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" class="ivu-mb">
      <Card :bordered="false" dis-hover :padding="6" class="ivu-mb">
        <template #title>
          <Avatar icon="md-apps" size="small" v-color="'#1890ff'" v-bg-color="'#e6f7ff'" />
          <span class="ivu-pl-8">我的日历</span>
        </template>
        <MyCalendar />
      </Card>
      </Col>
      <Col :xl="8" :lg="24" :md="24" :sm="24" :xs="24" class="ivu-mb">
      <!-- <Card :bordered="false" dis-hover class="ivu-mb">
          <template #title>
            <Avatar icon="md-heart" size="small" v-color="'#ff4d4f'" v-bg-color="'#fff1f0'" />
            <span class="ivu-pl-8">快捷操作</span>
          </template>
          <template #extra>
            <Tooltip placement="top" content="配置">
              <Icon type="md-settings" />
            </Tooltip>
          </template>
          <shortcut />
        </Card> -->
      <!-- <Card :bordered="false" dis-hover :padding="0" class="ivu-mb">
        <template #title>
          <Avatar icon="md-checkbox-outline" size="small" v-color="'#faad14'" v-bg-color="'#fffbe6'" />
          <span class="ivu-pl-8">待办事项</span>
        </template>
        <todo />
      </Card> -->
      </Col>
    </Row>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import MyCalendar from './my-calendar.vue'
// import shortcut from './shortcut';
// import todo from './todo';
// import callLine from './callLine';
// import member from './member';
import { getWeatherInfo } from '@/api/gaode'
import { hasOneOf } from '@/libs/tools'
import { RolesType } from '@/constants'

export default {
  name: 'dashboard-workplace',
  components: {
    MyCalendar,
    // shortcut,
    // todo,
    // callLine,
    // member
  },
  data() {
    return {
      weatherInfo: [{}, {}]
    }
  },
  computed: {
    ...mapState('admin/user', [
      'info'
    ]),
    hasT_M() {
      return hasOneOf(this.info.roleCodeList, RolesType.T_M)
    }
  },
  async mounted() {
    const response = await getWeatherInfo({
      city: this.info.workCity
    })
    this.weatherInfo = response.forecasts[0].casts
  }
}
</script>
<style lang="less">
.dashboard-workplace {
  &-header {
    &-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 16px;
    }

    &-tip {
      display: inline-block;
      vertical-align: middle;

      &-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 12px;
      }

      &-desc {
        color: #808695;
      }
    }

    &-extra {
      .ivu-col {
        p {
          text-align: right;
        }

        p:first-child {
          span:first-child {
            margin-right: 4px;
          }

          span:last-child {
            color: #808695;
          }
        }

        p:last-child {
          font-size: 22px;
        }
      }
    }
  }
}
</style>
